<template>
    <v-switch @change="updateStatusCheck()" v-model="statusCheckStatus" color="primary" class="ml-2" hide-details label="AAS Status Checks"></v-switch>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useNavigationStore } from '@/store/NavigationStore';

export default defineComponent({
    name: 'StatusSwitch',

    setup() {
        const navigationStore = useNavigationStore()

        return {
            navigationStore, // NavigationStore Object
        }
    },

    data() {
        return {
            statusCheckStatus: false, // Status of the status-check (true = active, false = inactive)
        }
    },

    mounted() {
        this.statusCheckStatus = this.statusCheck;
    },

    computed: {
        // get the status-check state from the store
        statusCheck() {
            return this.navigationStore.getStatusCheck;
        },
    },

    methods: {
        // Function to toggle the status-check
        updateStatusCheck() {
            this.navigationStore.dispatchUpdateStatusCheck(this.statusCheckStatus);
            // save status-check preference in local storage
            localStorage.setItem('statusCheck', this.statusCheckStatus.toString());
        },
    },
});
</script>